<template>
    <div class="body">
        <el-form ref="ruleForm" :model="mdl" label-width="130px">
            <el-form-item label="选项名" required>
                <el-input
                v-model="mdl.options"
                placeholder="请输入选项名"
                />
            </el-form-item>
            <el-form-item label="排序" required>
                <el-input v-model="mdl.sort" type="text" placeholder="请输入排序" />
            </el-form-item>
        </el-form>
        <div class="foot_btn">
            <el-button
                type="primary"
                :loading="submitLoading"
                @click="submitForm('ruleForm')"
            >提交</el-button>
            <el-button @click="handleCloseDrawer">取消</el-button>
        </div>
    </div>
</template>

<script>
import { addFeedbackOptions,updateFeedbackOptions } from '@/api/user'
export default {
  name: 'FormModel',
  props: {
    mdl: {
      type: Object,
      required: true
    },
    handleCloseDrawer: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      submitLoading: false,
      uploadData: null,
      imgList: []
    }
  },
  mounted() {
    
  },
  methods: {
    
    // 提交
    submitForm() {
        if (this.mdl.id) {
            this.mdl.roomId = this.mdl.id
        }
        const request = this.mdl.id ? updateFeedbackOptions(this.mdl) : addFeedbackOptions(this.mdl)
        request.then((res) => {
            if (res.statusCode === '00000') {
                this.$message({ message: '提交成功', type: 'success' })
                // 关闭弹窗
                this.handleCloseDrawer()
                // 调用父级组件刷新数据
                this.$emit('getList')
            }
        })
        .catch((error) => {
          console.log(error)
        })
        .finally(() => {
        })
    }
  }
}
</script>

<style lang="less" scoped>
.body {
  padding-right: 25px;
  .foot_btn{
    width:150px;
    margin: 0 auto;
  }
}

/deep/ .el-checkbox__label {
  font-size: 12px;
}
</style>
